<template>
  <div class="container-position">
    <div class="selected-box">
      <el-input
        v-model="listQuery.jobName"
        placeholder="请输入职位名称"
        style="width: 640px"
      ></el-input>
      <el-button type="primary" @click="querylist" class="ml20">搜索</el-button>
    </div>
    <div class="list" v-loading="listLoading">
      <el-card class="item mb15" v-for="(item, index) in list" :key="index">
        <div class="type-tag">
            <el-tag v-if="item.recruitmentState == 1" type="info" effect="dark" size="mini" class="mr10">已关闭</el-tag>
          </div>
        <div class="upper" :class="{pt10: item.recruitmentState == 1}">
          <div class="info">
            <div class="title">
              {{ item.jobName
              }}
            </div>
            <div class="limit">
              <span>{{ item.eduLevel_dictText }}</span>
                <span>{{ item.jobMaxAge && item.jobMaxAge > 0 ? item.jobMaxAge + '岁以下' : '年龄不限' }}</span>
                <span> {{ item.jobSex ? (item.jobSex == 1 ? '男':'女'): '性别不限' }} </span>
                <span>{{ item.subject_dictText ? item.subject_dictText : '专业不限' }}</span>
            </div>
          </div>
          <div class="button-group">
            <el-row>
              <el-button
                type="primary"
                size="small"
                plain
                @click="editDrawerShow('编辑职位', item)"
                :disabled="item.recruitmentState == 1"
                >编辑</el-button
              >
              <el-button
                size="small"
                 type="warning"
                  plain
                @click="closePosition(item.id)"
                :disabled="item.recruitmentState == 1"
                >关闭</el-button
              >
            </el-row>
          </div>
        </div>
        <div class="lower">
          <el-row>
              <el-col :span="8">
                 <div class="statistics">
            <span>招聘人数：{{ item.needCount }}</span>
            <span
              >已入职：<a class="count" @click="goViewDetails(item.id,item.jobName,7)">{{
                item.alreadyCount
              }}</a></span
            >
            <span
              >待招人数：{{
                parseInt(item.needCount - item.alreadyCount)
              }}</span
            >
          </div>
              </el-col>
                <el-col :span="8">
                  <div class="people-statistics">
                    <span
                      @click="goViewDetails(item.id,item.jobName,0)"
                    >新简历<a class="count">{{ item.notReadCount }}</a><i class="el-icon-arrow-right" /></span>
                    <span
                      class="ml30"
                      @click="goViewDetails(item.id,item.jobName,3)"
                    >目标人选<a class="count">{{ item.stepCount }}</a><i class="el-icon-arrow-right" /></span>
                  </div>
                </el-col>
                <el-col :span="8">
                 <div class="date">
                 
                  <p v-if="item.recruitmentState == 1">
                    {{
                      $moment(item.closeTime, "yyyy-MM-DD HH:mm:ss").format(
                        "yyyy-MM-DD HH:mm"
                      )
                    }}
                    关闭
                  </p>
                   <p v-else>
                    {{
                      $moment(item.updateTime ? item.updateTime : item.createTime, "yyyy-MM-DD HH:mm:ss").format(
                        "yyyy-MM-DD HH:mm"
                      )
                    }}
                    发布
                  </p>
                </div>
                </el-col>
              </el-row>
          </div>
      </el-card>
    </div>
    <no-data v-if="noDateView" />
    <!-- 弹窗抽屉-->
    <edit-drawer ref="editDrawer" @refresh="getList" />
    <pagination
      v-show="total > 0"
      :total="total"
      prev-text="上一页"
      next-text="下一页"
      layout="prev, pager, next, jumper"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
      pageBackground="none"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import editDrawer from "@/components/CurriculumVitaeEditDrawer";
import noData from "@/components/noData";
import { ssSessionList, edit,publishOrClose } from "@/api/position";
export default {
  name: "",
  components: { Pagination, editDrawer, noData },
  props: {
    // 专场id
    specialSessionId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      total: 1,
      list: [],
      noDateView: false,
      listQuery: {
        pageNo: 1,
        pageSize: 5,
        jobName:'',
        id: this.specialSessionId,
      },
      listLoading: false,
    };
  },
  // 方法
  methods: {
    // 跳转人才库
    goViewDetails(id, jobName, state) {
      if(state === 7){
        // 前往人才库
        this.$router.push({ name: "talentPool", params: {
          id: id,
          jobName: jobName,
        }});
      }else{
        this.$router.push({ name: "candidate", params: {
          id: id,
          jobName: jobName,
          state: state
        }});
      }
    },
    // 打开编辑框
    editDrawerShow(title, data, bsId) {
      this.$refs.editDrawer.show(title, data, bsId);
    },
    // 关闭职位
    closePosition(id) {
      this.$confirm("确定要关闭此职位吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        publishOrClose({ id: id }).then(
          (res) => {
            this.$message({
              message: "关闭成功",
              type: "success",
            });
            this.getList();
          }
        );
      });
    },
    querylist(){
      this.listQuery.pageNo = 1;
      this.getList()
    },
    // 列表查询
    getList() {
      this.listLoading = true;
      const query = this.listQuery;
      ssSessionList(query).then((res) => {
        this.list = res.result.records;
        this.total = res.result.total;
        this.listLoading = false;
        if (this.list.length == 0) {
          this.noDateView = true;
        } else {
          this.noDateView = false;
        }
      });
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 销毁
  destroyed() {},
};
</script>
<style lang="scss" scoped>
.container-position {
  .selected-box {
    display: flex;
    justify-content: center;
  }
  .list {
    margin-top: 15px;
     .item {
         position: relative;
        .type-tag{
          position:absolute;
          top: 0;
          left: 20px;
          .el-tag{
            border-radius: 0;
            border-bottom-right-radius: 8px;
          }
        }
      .upper {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        border-bottom: 1px solid #f3f3f3;
        .title {
          font-size: 16px;
          font-weight: bold;
          line-height: 21px;
          color: #333333;
        }
        .limit {
          font-size: 14px;
          font-weight: 400;
          line-height: 19px;
          color: #919191;
          margin-top: 10px;
          margin-bottom: 15px;
          span {
            margin-right: 20px;
            border-right: 1px solid #e8e8e8;
            padding-right: 20px;
          }
          span:last-child {
            border: none;
          }
        }
      }
      .lower {
        // display: flex;
        // align-items: center;
        // justify-content: space-between;
        line-height:20px;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        margin-top: 17px;
        .statistics {
          span {
            margin-right: 30px;
            a {
              color: #333333;
              padding-left: 8px;
            }
            .count {
              color: #2d8be9;
            }
          }
        }
        .people-statistics {
          text-align: center;
          font-size: 14px;
          font-weight: 400;
          color: #348ce8;
          span {
            cursor: pointer;
            a {
              padding-left: 8px;
            }
            i {
              color: #666;
              margin-left: 5px;
            }
          }
        }
        .date {
          text-align: right;
          font-size: 12px;
          p {
            margin: 0;
          }
        }
        .date-two{
          position: absolute;
          right: 0;
          top: -10px;
        }
      }
    }
  }
  .wxkj-drawer {
    .drawer-content {
      .ps {
        font-size: 14px;
        font-weight: 400;
        line-height: 19px;
        color: #999999;
        margin-top: 15px;
      }
    }
  }
}
</style>